<template>
    <view class="login-container">
        <view class="head-img"  :style="{
            backgroundImage: 'url(' + getUrl('resource/app/images/login_head.png') + ')',
        }">
            <view class="txt"> 忘记密码 </view>
        </view>
        <view class="login-view">
            <view class="login-box">
                <u-form
                    :model="formData"
                    ref="formRef"
                    borderBottom
                    labelWidth="80"
                    labelPosition="top"
                    :labelStyle="{
                        fontSize: '32rpx',
                        fontWeight: 'bold',
                        color: '#333333',
                        paddingBottom: '15rpx',
                    }"
                >
                    <view>
                        <u-form-item label="手机号" borderBottom>
                            <u-input
                                type="number"
                                name="mobile"
                                border="bottom"
                                placeholder="请输入手机号"
                                maxlength="11"
                                v-model="formData.mobile"
                            />
                        </u-form-item>
                        <u-form-item label="验证码" borderBottom>
                            <u-input
                                type="number"
                                name="code"
                                border="bottom"
                                maxlength="6"
                                placeholder="请输入验证码"
                                v-model="formData.code"
                            >
                                <template #suffix>
                                    <u-code
                                        ref="codeRef"
                                        @change="codeChange"
                                        seconds="60"
                                        changeText="X秒重新获取"
                                    ></u-code>
                                    <text
                                        @tap="getSmsCode"
                                        :text="codeTips"
                                        class="code-txt"
                                        >{{ codeTips }}</text
                                    >
                                </template>
                            </u-input>
                        </u-form-item>
                        <u-form-item label="密码" borderBottom>
                            <u-input
                                name="password"
                                :password="isShowPassword"
                                border="bottom"
                                placeholder="请输入密码"
                                v-model="formData.password"
                            >
                                <template #suffix>
                                    <u-icon
                                        :name="
                                            isShowPassword ? 'eye' : 'eye-fill'
                                        "
                                        size="20"
                                        @click="
                                            isShowPassword = !isShowPassword
                                        "
                                    ></u-icon>
                                </template>
                            </u-input>
                        </u-form-item>
                        <u-form-item label="确认密码" borderBottom>
                            <u-input
                                name="confirm_password"
                                :password="isShowConfirmPassword"
                                border="bottom"
                                placeholder="请输入确认密码"
                                v-model="formData.confirm_password"
                            >
                                <template #suffix>
                                    <u-icon
                                        :name="
                                            isShowConfirmPassword
                                                ? 'eye'
                                                : 'eye-fill'
                                        "
                                        size="20"
                                        @click="
                                            isShowConfirmPassword =
                                                !isShowConfirmPassword
                                        "
                                    ></u-icon>
                                </template>
                            </u-input>
                        </u-form-item>
                    </view>
                </u-form>
                <button class="mt-5" @tap="userSubmit()">确 定</button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { forgetPassword, sendSmsCode } from "@/api/login";
import { getUrl } from "@/utils/common";
import { test } from "@/uni_modules/uview-plus";
import { messageSuccess, messageError } from "@/utils/message";
import { useRoute } from "@/hooks/useRoute";
import useUserStore from "@/stores/user";
import { useApiLock } from "@/hooks/useApiLock";

const formData = reactive({
    mobile: "",
    code: "",
    password: "",
    confirm_password: "",
});

const formRef = ref(null);
const codeRef = ref(null);
const codeTips = ref("");
const isAgreementClick = ref(false);
const isShowPassword = ref(true);
const isShowConfirmPassword = ref(true);

const codeChange = (text) => {
    codeTips.value = text;
};

// 获取验证码
const getSmsCode = async () => {
    if (codeRef.value?.canGetCode) {
        if (!test.mobile(formData.mobile)) {
            messageError("手机号不符合要求");
            return "";
        }
        await sendSmsCode({
            scene: "retrieve_password",
            mobile: formData.mobile,
        });
        messageSuccess("验证码已发送");
        codeRef.value?.start();
    }
};

const { apiCall: apiForgetPassword } = useApiLock(forgetPassword);

const userSubmit = async () => {
    if (!formData.mobile) return messageError("请输入手机号");
    if (!formData.code) return messageError("请输入验证码");
    if (!formData.password) return messageError("请输入密码");
    if (!formData.confirm_password) return messageError("请输入确认密码");
    if (formData.password != formData.confirm_password)
        return messageError("密码和确认密码不一致");

    let res = await apiForgetPassword(formData);
    useUserStore().login(res.token);
    messageSuccess("修改成功！", () => {
        useRoute().jumpTo({ url: "/pages/login/login", type: "reLaunch" });
    });
};
</script>

<style lang="scss" scoped>
.login-container {
    height: 100vh;
    background: #fff;

    .head-img {
        width: 100%;
        height: 300rpx;
        background-size: 100%;

        .txt {
            text-align: left;
            font-size: 42rpx;
            color: #ffffff;
            padding: 50rpx 0 0 70rpx;
            font-weight: bold;
            line-height: 70rpx;
        }
    }

    .login-view {
        width: 100%;
        position: relative;
        margin-top: -120rpx;
        background-color: #ffffff;
        border-radius: 8% 8% 0% 0;

        .login-box {
            width: 600rpx;
            margin: 0 auto;
            font-size: 28rpx;
            padding-top: 80rpx;

            .code-txt {
                color: $u-primary;
                font-size: 15px;
            }

            .navigator-txt {
                color: $u-primary;
            }

            button {
                font-size: 28rpx;
                background: #2796f2;
                color: #fff;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 50rpx;
                font-weight: bold;
            }
        }
    }
}

.clear {
    zoom: 1;
}

.clear:after {
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    content: "\20";
}
</style>
